<template>
  <view class="cart-box" v-if="cart.length!==0">
    <!--导入外部收货地址组件  -->
    <my-address></my-address>
    <!-- 购物车 -->
    <view class="shop-box">
      <uni-icons type="shop-filled" size="18"></uni-icons>
      <text class="gwc">购物车</text>
    </view>
    <uni-swipe-action>
      <!-- 商品列表区域 -->
      <block v-for="(item,i) in cart" :key="i">
        <uni-swipe-action-item :right-options="options" @click="swipeActionClick(item)">
          <!-- 让购物车默认选中 :showRadio="true"-->
          <my-goodslist :goods="item" :showRadio="true" @radio-click="radioChange" :showNumber="true"
            @num-change="showNumberChange"></my-goodslist>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>
    <!-- 导入结算组件 -->
    <my-settle></my-settle>
    <!-- 空白购物车区域 -->
  </view>
  
 <view class="cart-empty" v-else>
   <image src="/static/cart_empty@2x.png" class="cart-image"></image>
   <text>空空如也~</text>
 </view>
</template>

<script>
  // 导入自己封装的 mixin 模块
  import badgeMix from '@/mixins/tabbar-badge.js'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    // 将 badgeMix 混入到当前的页面中进行使用(挂载)
    mixins: [badgeMix],
    computed: {
      ...mapState('m_cart', ['cart'])
    },
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000' // 按钮的背景颜色
          }
        }]
      };
    },
    methods: {
      ...mapMutations('m_cart', ['updateGoods_State', 'updateGoods_Count', 'removeGoodscart']),
      radioChange(e) {
        this.updateGoods_State(e)
      },
      //处理商品数量变化
      showNumberChange(e) {
        //console.log(e)
        this.updateGoods_Count(e)
      },
      //处理点击删除商品事件
      swipeActionClick(goods) {
        //console.log(goods)
        this.removeGoodscart(goods.goods_id)
      }
    }
  }
</script>

<style lang="scss">
  .cart-box{
    padding-bottom: 50px;
  }
  .shop-box {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    border-bottom: 1px solid #efefef;

    .gwc {
      margin-left: 10px;
    }
  }
  //购物车为空
  .cart-empty{
    display: flex;
    flex-direction: column;//纵向布局
    align-items: center;
    .cart-image{
      width: 50px;
      height: 50px;
      padding-top: 200px;
    }
    text{
      color:gray;
      margin-top: 10px;
      font-size: 12px;
      text-align: center;
    }
  }
</style>
